<template>
  <el-menu-item
    v-if="!hasChildren"
    :index="item.url"
    :key="item.id"
    :class="{ 'is-active': item.url === activeIndex }"
    @click="handleMenuItemClick(item.url)"
  >
    <router-link :to="item.url">
      <el-icon v-if="item.icon">
        <component :is="item.icon" />
      </el-icon>
      <span>{{ item.menuName }}</span>
    </router-link>
  </el-menu-item>

  <el-sub-menu v-else :index="item.id.toString()">
    <template #title>
      <el-icon v-if="item.icon">
        <component :is="item.icon" />
      </el-icon>
      <span>{{ item.menuName }}</span>
    </template>
    <MenuItem v-for="child in item.children" :key="child.id" :item="child" :activeIndex="activeIndex" @update:activeIndex="$emit('update:activeIndex', $event)" />
  </el-sub-menu>
</template>

<script setup>
import { computed,resolveComponent } from "vue";
import { useRouter } from "vue-router";
import { Odometer } from '@element-plus/icons-vue';
const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  activeIndex: {
    type: String,
    // required: true,
    default: ''
  }
});
const emit = defineEmits(['update:activeIndex']);

const router = useRouter();

const hasChildren = computed(() => {
  return props.item.children && props.item.children.length > 0;
});

const handleMenuItemClick = (url) => {
  console.log(url);
  
  router.push({ path: url });
  emit('update:activeIndex', url);
};
</script>

<style scoped>
a{
  color: #fff;
  text-decoration: none;
}

.el-menu-item.is-active {
  background-color: #3a7a97 !important;
  color: #1890ff !important;
}

 .el-menu-item:hover {
  background-color: #76c8f4 !important;
  color: #1890ff !important;
}

.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #1890ff;
}
</style>
